import React from 'react';
import { connect } from 'umi';
import { Form, Modal, ConfigProvider, Icon } from 'antd';
import { QuickForm } from 'vv-frontend-components';
import './cancleEntry.less';

const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 10 }
};
const CancleEntry = ({
    Visible,
    params, // 传入的参数
    onOk, // 关闭模态框
    onCancel, // 关闭模态框
    dispatch,
    form,
    loading
}) => {
    const { cancleDetail, fetchList } = params;
    const { talentName, talentPhone, companyName } = cancleDetail;
    const config = [
        {
            field: 'talentName',
            label: '员工姓名',
            key: 'talentName',
            props: {
                ...formItemLayout
            },
            component: <div className="fontColor">{talentName}</div>
        },
        {
            field: 'talentPhone',
            label: '手机号',
            key: 'talentPhone',
            props: {
                ...formItemLayout
            },
            component: <div className="fontColor">{talentPhone}</div>
        },
        {
            field: 'companyName',
            label: '所属公司',
            key: 'companyName',
            props: {
                ...formItemLayout
            },
            component: <div className="fontColor">{companyName}</div>
        }
    ];

    // 取消入职
    const handleOk = closeModel => {
        form.validateFields(err => {
            if (!err) {
                dispatch({
                    type: 'entryManagement/cancleEntry',
                    payload: {
                        candidateCode: cancleDetail.candidateCode,
                        id: cancleDetail.id,
                        offerState: 'cancelEntry'
                    },
                    success: () => {
                        fetchList({ pageNo: 1 });
                    }
                });
                // 关闭模态框
                closeModel();
                form.resetFields();
            }
        });
    };
    return (
        // <span className="modelStyle2">
        <Modal
            title={
                <div>
                    <Icon type="question-circle" style={{ marginRight: '14px', fontSize: '22px', color: ' #FAAD14' }} />
                    <span>确定该员工不入职吗?</span>
                </div>
            }
            width="443px"
            visible={Visible}
            wrapClassName="modelStyle2"
            confirmLoading={loading}
            onOk={() => {
                handleOk(onOk);
            }}
            closable={false}
            onCancel={() => {
                onCancel();
                form.resetFields();
            }}
        >
            {/* <Spin spinning={loading}> */}
            <ConfigProvider getPopupContainer={trigger => trigger.parentNode}>
                <Form layout="horizontal">
                    <p className="exprience">一旦取消入职，将从待入职员工列表中移除，同时，该员工变为取消入职状态。</p>
                    <QuickForm config={config} form={form} />
                </Form>

                {/* </Spin> */}
            </ConfigProvider>
        </Modal>
        // </span>
    );
};

export default connect(({ entryManagement, loading }) => ({
    entryManagement,
    loading: loading.models.entryManagement
}))(Form.create()(CancleEntry));
